<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #yard {
            width: 800px;
            height: 600px;
            border: 1px solid black;
            margin: 100px auto;

            position: relative;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: chartreuse;

            position: absolute;
            left: 0;
            top: 0;
        }

        th,
        td {
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- <p id="pMousePosition">光标位置</p> -->

    <!-- <div id="yard">
        <div class="box"></div>
    </div> -->

    <script>
        /* 
        实现页面实时显示光标坐标位置
        */
        function fn1() {
            var pMousePosition = document.querySelector("#pMousePosition")

            // document.onmousemove()
            document.onmousemove = function (e) {
                console.log(e.pageX, e.pageY);
                pMousePosition.innerText = `实时光标位置：(${e.pageX},${e.pageY})`
            }

            document.onmouseleave = function (e) {
                document.onmousemove = null
            }
        }

        /* ·改进拖拽盒子案例，实现盒子在父元素的边界内拖拽盒子； */
        function fn2() {
            var yard = document.getElementById("yard")
            var box = document.getElementsByClassName("box")[0]

            /* 拿到box的宽高 */
            var boxStyles = window.getComputedStyle(box)
            var boxWidth = parseFloat(boxStyles.width)
            var boxHeight = parseFloat(boxStyles.height)

            /* 拿到院子的左边和顶边margin */
            var yardStyles = window.getComputedStyle(yard)
            var yardWidth = parseFloat(yardStyles.width)
            var yardHeight = parseFloat(yardStyles.height)
            console.log(yardWidth, yardHeight);

            var yml = parseFloat(yardStyles.marginLeft)
            var ymt = parseFloat(yardStyles.marginTop)
            console.log(yml, ymt);

            var shouldDrag = false

            /* 在box上down下鼠标开始拖动 */
            box.onmousedown = function () {
                // console.log("onmousedown");
                shouldDrag = true
            }

            /* 满屏移动鼠标时 box跟随(有条件) */
            document.onmousemove = function (e) {
                if (!shouldDrag) {
                    return
                }

                /* box跟随鼠标 */
                // box.style.left = e.pageX - yml + "px"
                // box.style.top = e.pageY - ymt + "px"

                /* 边界校正 */
                var left = e.pageX - yml
                var top = e.pageY - ymt
                left = left < 0 ? 0 : left
                top = top < 0 ? 0 : top
                // left = left > 700 ? 700 : left
                // top = top > 500 ? 500 : top
                left = left > (yardWidth - boxWidth) ? (yardWidth - boxWidth) : left
                top = top > (yardHeight - boxHeight) ? (yardHeight - boxHeight) : top

                /* box跟随鼠标 */
                box.style.left = left + "px"
                box.style.top = top + "px"
            }

            /* 任意位置松开鼠标 停止拖动 */
            document.onmouseup = function () {
                shouldDrag = false
            }
        }

        /* 
        ·在页面上根据数据，动态创建表格
        提示：动态地拼接一个html字符串 然后box.innerHTML = htmlStr
        var arr = [
            {
            name: 'Jack',
            age: 18,
            gender: '男'
            },{
            name: 'Rose',
            age: 20,
            gender: '女'
            },{
            name: 'Top',
            age: 22,
            gender: '男'
            }
        ]      
        */
        function fn3() {
            /* 数据 */
            var arr = [
                {
                    name: 'Jack',
                    age: 18,
                    gender: '男'
                }, {
                    name: 'Rose',
                    age: 20,
                    gender: '女'
                }, {
                    name: '隆哥',
                    age: 60,
                    gender: '女？'
                }, {
                    name: 'Top',
                    age: 22,
                    gender: '男'
                }
            ]

            /* 创建一个table丢入body */
            var table = document.createElement("table")
            table.border = "1"
            table.cellSpacing = "0"
            document.body.appendChild(table)

            // 准备组装table的innerHTML
            var tableHtml = ""

            /* 绘制表头：随意取出一条数据 读取其所有Key 一个key对应一个th */
            var p = arr[0]
            // 创建表头行
            var trHead = "<tr>"

            // 一个属性一个th 尽数丢入表头行
            for (var key in p) {
                // 一个key一个表头
                trHead += `<th>${key}</th>`
            }

            // 将表头行收尾并丢入tableHtml
            trHead += "</tr>"
            tableHtml += trHead

            /* 添加数据:每条数据一个tr 每个属性值一个td */
            arr.forEach(function (p) {
                // 每条数据一个tr
                var tr = "<tr>"

                // 每个属性值一个td
                for (var key in p) {
                    tr += `<td>${p[key]}</td>`
                }

                // 将当前行收尾添加到tableHtml
                tr += "</tr>"
                tableHtml += tr
            })

            // 将tableHtml设置为表格的innerHTML
            table.innerHTML = tableHtml
        }

        function main() {
            // fn1()
            // fn2()
            fn3()
        }
        main()
    </script>
</body>

</html>